/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/**
 * 全局样式变量定义 - 记录类APP主题配置
 * 主色: 天青蓝(#87CEEB)
 * 辅色: 景泰蓝(#2775b6)
 * 背景: #F5FBFE
 */

/* ========== 颜色系统 ========== */
/* 基础色值 */
$primary-color: #87CEEB;
$secondary-color: #2775b6;
$background-color: #F5FBFE;

/* 主色调 */
$primary-light: lighten($primary-color, 10%);
$primary-dark: darken($primary-color, 10%);
$primary-hover: #6cb8d9;
$primary-active: #4fa3c4;

/* 辅助色 */
$secondary-light: lighten($secondary-color, 10%);
$secondary-dark: darken($secondary-color, 10%);
$secondary-hover: #1e5e99;
$secondary-active: #16487d;

/* 中性色 */
$text-primary: #333333;
$text-secondary: #666666;
$text-disabled: #999999;
$border-color: #e0e0e0;
$card-background: #ffffff;

/* 功能色 */
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$info-color: #1890ff;

/* ========== CSS变量定义 ========== */
:root {
  /* 主色系 */
  --primary-color: #{$primary-color};
  --primary-light: #{$primary-light};
  --primary-dark: #{$primary-dark};
  --primary-hover: #{$primary-hover};
  --primary-active: #{$primary-active};
  
  /* 辅助色系 */
  --secondary-color: #{$secondary-color};
  --secondary-light: #{$secondary-light};
  --secondary-dark: #{$secondary-dark};
  --secondary-hover: #{$secondary-hover};
  --secondary-active: #{$secondary-active};
  
  /* 背景与文字 */
  --background-color: #{$background-color};
  --card-background: #{$card-background};
  --text-primary: #{$text-primary};
  --text-secondary: #{$text-secondary};
  --text-disabled: #{$text-disabled};
  --border-color: #{$border-color};
  
  /* 功能色 */
  --success-color: #{$success-color};
  --warning-color: #{$warning-color};
  --error-color: #{$error-color};
  --info-color: #{$info-color};
}
// 纯文本编辑器样式变量
$simple-editor-border: var(--border-color);
$simple-editor-bg: white;
$simple-editor-text: var(--text-primary);

/* ========== 尺寸系统 ========== */
$base-font-size: 14px;
$small-font-size: 12px;
$large-font-size: 16px;
$title-font-size: 18px;

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

/* ========== 圆角系统 ========== */
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 12px;
$border-radius-circle: 50%;

/* ========== 阴影系统 ========== */
$box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

/* ========== 动画曲线 ========== */
$animation-duration: 0.3s;
$animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* ========== 导出到JS ========== */
:export {
  primaryColor: $primary-color;
  secondaryColor: $secondary-color;
  backgroundColor: $background-color;
  textPrimary: $text-primary;
}